<template>
	<div>
		<div class="header">
			<img src="../assets/jtz.png" alt="" class="jtz">
			<span>{{this.$route.query.name}}</span>
			<router-link to="/" class="qiehuan">切换城市</router-link>
		</div>
		<form class="sousuo">
			<div><input type="search" placeholder="输入学校、商务楼、地址" v-model="value" class="input_text" results="5"></div>
			<div><input type="submit" value="提交" @click="tijiao" class="input_submit"></div>
		</form>

		<div class="ssls">搜索历史</div>
		<ul class="ls" v-show="xss">
			<router-link :to="{name:'shouye',query:{id:item.id,name:item.name}}" v-for="(item,index) in datas" :key="index" tag="li"
			 @click="bendi(item)">
				<div>{{item.name}}</div>
				<p>{{item.address}}</p>
			</router-link>
			<div class="qkls" v-if="qk" @click="qkls">清空历史</div>
		</ul>
		<ul class="ls" v-show="yc">
			<router-link :to="{name:'shouye',query:{id:item.id,name:item.name}}" v-for="(item,index) in sscs" :key="index" tag="li"
			 v-model="value" @click.native="bendi(item)">
				<div>{{item.name}}</div>
				<p>{{item.address}}</p>
			</router-link>
		</ul>
		<div class="wjg" v-if="xs">很抱歉！无搜索结果</div>
	</div>
</template>

<script>
	export default {
		name: "dingwei",
		data() {
			return {
				value: "",
				sscs: [],
				xs: false,
				datas: [],
				qk: true,
				yc: false,
				xss:true
			}
		},
		created() {
			this.datas = JSON.parse(localStorage.getItem("dendi"));
			this.qkl();
		},
		methods: {
			tijiao() {
				let obj = this;
				obj.xs = false;
				obj.yc = true;
				obj.xss = false;
				this.$axios({
					url: 'https://elm.cangdu.org/v1/pois?' + 'city_id=' + this.$route.query.id + '&keyword=' + "'" + this.value +
						"'" + "&type=search",
					method: "get",
					data: {
						value: this.value,
					}
				}).then(function(res) {
					window.console.log(res)
					obj.sscs = [];
					for (let i = 0; i < res.data.length; i++) {
						obj.sscs.push(res.data[i])
					}
					if (obj.sscs.length == 0) {
						obj.xs = true;
					}
					window.console.log(obj.sscs)
				})
			},
			bendi(item) {
				this.datas = JSON.parse(localStorage.getItem("dendi")) || [];
				window.console.log(this.datas)
				if (this.datas) {
					this.datas.unshift(item)
				}

				window.localStorage.setItem("dendi", JSON.stringify(this.datas))
				window.console.log(JSON.parse(localStorage.getItem("dendi")))
				// item.unshift(datas);
				// window.console.log(item)
				// JSON.parse(localStorage.getItem("dendi"));
				// window.console.log(JSON.parse(localStorage.getItem("dendi")))
			},
			qkl() {
				if (this.datas.length == 0) {
					this.qk = false;
				}
			},
			qkls() {
				this.datas = [];
				window.localStorage.setItem('dendi', JSON.stringify(this.datas))
				this.qk = false
			}
		}
	}
</script>

<style scoped>
	.qkls {
		font-size: 33px;
		color: #666;
		text-align: center;
		line-height: 94px;
		background-color: #fff;
	}

	.sousuo {
		background-color: white;
		border-top: 1px solid #e4e4e4;
		border-bottom: 1px solid #e4e4e4;
		padding-top: 20px;
		margin-top: 20px;
	}

	a {
		text-decoration: none;
		color: #000000;
	}

	.jtz {
		width: 70px;
		height: 70px;
		position: absolute;
		top: 12px;
	}

	.header {
		width: 100%;
		height: 90px;
		background-color: #3190e8;
		position: relative;
	}

	.header span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50%;
		color: #fff;
		text-align: center;
		font-weight: 700;
		font-size: 40px;

	}

	.qiehuan {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(-20%, -50%);
		color: white;
		font-size: 28px;
	}

	.input_text,
	.input_submit {
		border-radius: .1rem;
		margin-bottom: 20px;
		width: 100%;
		height: 70px;
		border: 1px solid #e4e4e4;
		font-size: 30px;
		padding: 14px;
		box-sizing: border-box;
	}

	.input_submit {
		background-color: #3190e8;
		text-align: center;
		color: #fff;
	}

	.sousuo div {
		width: 90%;
		margin: 0 auto;

	}

	.ssls {
		border-top: 1px solid #e4e4e4;
		border-bottom: 1px solid #e4e4e4;
		padding-left: 20px;
		font: 24px/38px Microsoft YaHei;
		;
	}

	.ls {
		background-color: #fff;
		border-top: 1px solid #e4e4e4;
		width: 100%;
	}

	.ls li {
		margin: 0 auto;
		padding-top: 30px;
		border-bottom: 1px solid #e4e4e4
	}

	.ls li div {
		margin: 0 auto 16px;
		width: 90%;
		font-size: 30px;
		color: #333;
	}

	.ls li p {
		width: 90%;
		margin: 0 auto 26px;
		font-size: 24px;
		color: #999;
	}

	.ls li div,
	p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wjg {
		margin: 0 auto;
		font: 30px/82px Microsoft YaHei;
		color: #333;
		background-color: #fff;
		text-indent: 24px;
	}
</style>
